<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>000HelloWorld</title>
    <style>
        #app span {
            display: block;
        }

        #app .red {
            color: #ff0000;
        }

        #app .blue {
            color: #0000aa;
        }
    </style>
</head>

<body>
<div id="app">
    <!--动态class-->
    <span class="static" :class="{'red':isRed,'blue':isBlue}">多彩字体</span>
    <input type="checkbox" name="" id="" v-model="isRed"><input type="checkbox" name="" id="" v-model="isBlue">

    <span class="static" :class="classObject">多彩字体</span>
    <span class="static" :class="[red,blue]">多彩字体</span>
    <span class="static" :class="[isRed?red:blue]">多彩字体</span>

    <!--动态内联样式-->
    <span :style="{color:bindColor}"></span>
    <span :style="[styleObj1,styleObj2]"></span>
    <!--当 v-bind:style 使用需要厂商前缀的 CSS 属性时，
    如 transform，Vue.js 会自动侦测并添加相应的前缀。-->
</div>

</body>
<script src="../vendor/vue1.0.26.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            isRed: true,
            isBlue: false,
            classObject: {'red': true, 'blue': false},
            red: 'red', blue: 'blue',
            bindColor:"#f00",
            styleObj1:{color:"#f00"},
            styleObj2:{"font-size":"16px"}
        }
    })
</script>

</html>